import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

@Component({
  selector: 'app-input-number-basic',
  standalone: true,
  imports: [NzInputNumberModule, NzInputModule, FormsModule],
  template: `
    <p class="demo">
      <nz-input-number
        [nzMin]="1"
        [nzMax]="10"
        nzStep="2"
        [(ngModel)]="value"
      ></nz-input-number>

      {{ valueType }}
    </p>

    <p class="demo">
      <input
        nz-input
        [(ngModel)]="value2"
        type="number"
        step="2"
        min="1"
        max="10"
      />

      {{ value2Type }}
    </p>
  `,
  styles: ``,
})
export class InputNumberBasicComponent {
  value: number | '' = '';
  value2: number | '' = '';
  get valueType() {
    if (this.value === null) {
      return 'null';
    } else if (this.value === undefined) {
      return 'undefined';
    }
    return typeof this.value;
  }

  get value2Type() {
    if (this.value2 === null) {
      return 'null';
    } else if (this.value2 === undefined) {
      return 'undefined';
    }
    return typeof this.value2;
  }
}
